<script setup>
import { ref, onMounted } from 'vue';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Overlay from 'ol/Overlay';
import { fromLonLat } from 'ol/proj';

// 地图容器的引用
const mapContainer = ref(null);
// 弹出框容器的引用
const popup = ref(null);
// 用于存储 Overlay 实例
let overlay = null;

// 初始化地图
onMounted(() => {
  // 创建地图
  const map = new Map({
    target: mapContainer.value, // 指向我们上面定义的div
    layers: [
      new TileLayer({
        source: new OSM() // 使用OSM底图
      })
    ],
    view: new View({
      center: fromLonLat([0, 0]), // 中心点，这里转换成墨卡托坐标
      zoom: 2 // 缩放级别
    })
  });

  // 创建弹出框 Overlay
  overlay = new Overlay({
    element: popup.value, // 弹出框的DOM元素
    positioning: 'bottom-center',
    offset: [0, -50] // 调整位置，让箭头指向点击的地方
  });
  // 将Overlay添加到地图上
  map.addOverlay(overlay);

  // 地图点击事件
  map.on('click', (event) => {
    // 获取点击的坐标（在地图坐标系中，这里是EPSG:3857）
    const coordinate = event.coordinate;
    // 将坐标转换为经纬度（EPSG:4326）
    const [lon, lat] = transformCoordinate(coordinate);

    // 显示弹出框
    showPopup(coordinate, `经度: ${lon.toFixed(2)}<br>纬度: ${lat.toFixed(2)}`);
  });
});

// 坐标转换函数：从EPSG:3857转到EPSG:4326（即经纬度）
function transformCoordinate(coordinate) {
  // 这里我们简单处理，实际上要用ol/proj的transform函数
  // 注意：这里仅为示例，实际应用需要转换
  // 由于OpenLayers的fromLonLat和toLonLat是相反操作，我们这样用：
  // 但我们上面用的是fromLonLat([0,0])，所以点击获取的坐标是EPSG:3857，要转回4326
  const lon = (coordinate[0] / 20037508.34) * 180;
  let lat = (coordinate[1] / 20037508.34) * 180;
  lat = (180 / Math.PI) * (2 * Math.atan(Math.exp((lat * Math.PI) / 180)) - Math.PI / 2);
  return [lon, lat];
}

// 显示弹出框
function showPopup(coordinate, content) {
  // 设置弹出框位置
  overlay.setPosition(coordinate);
  // 设置弹出框内容
  document.querySelector('.popup-content').innerHTML = content;
  // 显示弹出框（通过设置样式）
  popup.value.style.display = 'block';
}

// 关闭弹出框
function closePopup() {
  // 隐藏弹出框
  popup.value.style.display = 'none';
  // 移除Overlay的位置
  overlay.setPosition(undefined);
}
</script>


<template>
  <div ref="mapContainer" style="width: 100%; height: 100vh;"></div>
  <!-- 弹出框的HTML，我们放在这里 -->
  <div ref="popup" class="popup">
    <div class="popup-content"></div>
    <button @click="closePopup">×</button>
  </div>
</template>

<style scoped>
/* 弹出框样式 */
.popup {
  position: absolute;
  background-color: white;
  padding: 15px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  display: none;
}
.popup:after, .popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 50%;
  margin-left: -10px;
}
.popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 50%;
  margin-left: -11px;
}
.popup button {
  position: absolute;
  top: 2px;
  right: 8px;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
}
</style>
